<template>
  <div class="main">
    <el-row>
      <el-form :inline="true" label-width="120px" labelPosition="left" :model="addForm">
        <el-row>
          <el-form-item label="补播日期段">
            <el-date-picker
              style="width:300px"
              type="daterange"
              v-model="addForm.time"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <div class="addResouce">
            <span class="controlName">资源</span>
            <span class="addControl" @click="addResouce">加入资源</span>
          </div>
        </el-row>
        <el-row>
          <resourceTable
            :tableData="resouceTable"
            @handleResourceChange="handleResourceChange"
            @handleResourceDelete="resourceDelete"
          ></resourceTable>
        </el-row>
        <el-row type="flex" justify="flex-start">
          <el-col :span="11">
            <el-form-item label="相关附件">
              <el-upload
                class="upload-demo"
                action="http://dev.media.xkphp.com/api/upload"
                multiple
                :on-success="addPlaySuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="投放要求">
            <el-input
              type="textarea"
              v-model="addForm.note"
              style="width:300px;"
              :rows="2"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>

    <el-dialog title="添加资源" :visible.sync="addResouceShow" append-to-body destroy-on-close center width="60%">
      <add-resource-box ref="boxChild" :addType="addType"></add-resource-box>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addResouceShow = false">取 消</el-button>
        <el-button type="primary" @click="resourceSave">加 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addResourceBox from "../../add_contract/components/addResourceBox.vue";
import resourceTable from "../../add_contract/components/resourceTable.vue";
import moment from "moment";
import generateUUID from "../../add_contract/components/uuid.js";
import {Add_Rebroadcast} from "@/api/Salesman";
export default {
  props:['id'],
  components: {
    addResourceBox,
    resourceTable
  },
  data() {
    return {
      addForm: {
        time: "",
        note: "",
        file_path:[]
      },
      addType: null,
      addResouceShow: false,
      resouceTable: []
    };
  },
  methods: {

    getRebroadcast(){
      Add_Rebroadcast({id:this.id}).then(res =>{
        if (res.code == 200){
          this.resouceTable = res.data.get_resources
        }
      })
    },

    addPlaySuccess(response, file, fileList) {
      this.addForm.file_path.push(response.data.path);
    },
    addResouce(){
      this.addType = null;
      this.addResouceShow = true;
    },
    resourceSave() {
      if (this.$refs.boxChild.get_resources.expenses == "") {
        this.$message.error("输入费用");
      } else if (this.$refs.boxChild.get_resources.id == "") {
        this.$message.error("请选择资源");
      } else if (this.$refs.boxChild.get_resources.often == "") {
        this.$message.error("请选择时间");
      } else {
        let index = "";
        if (this.resouceTable.length == 0) {
          this.$refs.boxChild.get_resources.fakeID = generateUUID();
          this.resouceTable.push(this.$refs.boxChild.get_resources);
        } else {
          if (this.$refs.boxChild.get_resources.fakeID) {
            let index = "";
            this.resouceTable.forEach((p, i) => {
              if (p.fakeID == this.$refs.boxChild.get_resources.fakeID) {
                this.$set(
                  this.resouceTable,
                  i,
                  this.$refs.boxChild.get_resources
                );
              }
            });
          } else {
            this.$refs.boxChild.get_resources.fakeID = generateUUID();
            this.resouceTable.push(this.$refs.boxChild.get_resources);
          }
        }
        this.addResouceShow = false;
      }
    },
    resourceDelete(data) {
      let arr = [data.id];
      let allArr = [...this.resouceTable];
      let finalArr = allArr.filter(item => !arr.includes(item.id));
      this.resouceTable = finalArr;
    },
    handleResourceChange(data) {
      this.addType = { ...data };
      this.addResouceShow = true;
    }
  },
  mounted(){
    this.getRebroadcast()
  }
};
</script>

<style scoped land='scss'>
.main {
  width: 100%;
  height: 100%;
}
.chose {
  color: #169bd5;
  margin-left: 20px;
  cursor: pointer;
  line-height: 36px;
  font-size: 14px;
}
.addResouce {
  width: 100%;
  margin: 10px 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.addControl {
  margin-left: 20px;
  color: #169bd5;
  cursor: pointer;
}
</style>
